<template>
    <teleport to='body'>
        <div class='y-floatbtn d-flex flex-column'>
            <span v-for="(btn, idx) in btns" :key="idx" class="f-btn" :class="`btn${idx}`"
                @click="() => YFloatBtn.onClick(btn.val)">
                <component :is="btn.icon"></component>
                <div class="dot" v-if="btn.dot"></div>
            </span>
            <!-- <span class="f-btn" @click="goPage('https://www.baidu.com')">
            <img id="topLoad" style="width: 20px;height: 16px;" src="/src/assets/svg/flexd_twt.svg" alt="">
        </span>
        <span class="f-btn" @click="goPage('https://www.baidu.com')">
            <img  id="topLoad" style="width: 20px;height: 20px;" src="/src/assets/flxed_tg.png" alt="">
        </span> -->
        </div>
    </teleport>
</template>

<script lang='ts' setup>
import { useLayout } from "@/stores/layout";
import { YFloatBtn } from "./script/YFloatBtn";
import { computed } from "vue"
const layout = useLayout();
const btns = computed(() => {
    console.log("YFloatBtn.btns.value 变成", YFloatBtn.btns.value)
    if (layout.isToTop) {
        return YFloatBtn.btns.value;
    }
    return YFloatBtn.btns.value.slice(3, 5);
})

</script>
<style lang='less' scoped>
.y-floatbtn {
    position: fixed;
    right: -4px;
    bottom: 5.8%;
    z-index: 90;
    width: 40px;

    span {
        cursor: pointer;
        width: 40px;
        height: 42px;
        padding: 10px;

        // box-shadow: 0px 2px 4px 0px #171A1F;
        border-radius: 4px;

        &:not(:first-child) {
            margin-top: 10px;
        }

        // &:hover {
        //     :deep(g) {
        //         stroke: var(--main) !important;
        //     }

        //     :deep(#topLoad) {
        //         fill: var(--main) !important;
        //     }
        // }
    }

    .f-btn {
        // background: #23282D;
        position: relative;
        .dot{
            position: absolute;
            width: 5px;
            height: 5px;
            background: #ff0000;
            border-radius: 50%;
            z-index: 1;
            right: 6px;
            top: 6px;
        }

        &:hover {
            :deep(g) {
                stroke: var(--main) !important;
            }

            :deep(#sc) {
                fill: var(--main) !important;
                stroke: none !important;
            }

            :deep(#topLoad) {
                fill: var(--main) !important;
            }
        }
    }
}
</style>